<template>
  <van-cell
    :class="{ 'is-disabled': info.disabled, 'common-pay': true }"
    :title="info.name"
    @click="onChange(info.pay_way)"
    :clickable="!info.disabled"
  >
    <template #title>
      <img :src="info.icon" class="common-pay__icon" />
      <span type="danger">{{ info.name }}</span>
    </template>
    <template #right-icon>
      <van-radio :name="info.pay_way" :disabled="info.disabled" />
    </template>
  </van-cell>
</template>

<script>
import { Radio, Cell } from "vant";

export default {
  model: {
    prop: "checked",
    event: "change",
  },
  props: {
    checked: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
    },
  },
  components: {
    [Cell.name]: Cell,
    [Radio.name]: Radio,
  },
  methods: {
    onChange(way) {
      if (!this.info.disabled) {
        this.$emit("change", way);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.common-pay {

  ::v-deep .van-cell__title {
    display: flex;
    align-items: center;
  }

  &__icon {
    width: 0.48rem;
    height: 0.48rem;
    margin-right: 0.16rem;
  }
}
</style>
